<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>核心思想</title>
        <style>
</style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
</style>
        
        <script src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
        
    </head>
    <body class="vscode-light">
        <h1 id="核心思想">核心思想</h1>
<p>vue.js就是一个MVVM的实现者，实现了DOM监听与数据绑定。</p>
<h1 id="优点">优点</h1>
<ul>
<li>轻量，压缩后就20多kb。</li>
<li>移动设备优先。更适合移动设备，比如移动设备的Touch事件。</li>
<li>容易上手。</li>
<li>吸取了Angular的模块化和React虚拟DOM的长处。</li>
</ul>
<p>Vue不支持IE8及以下版本，<strong>因为IE8无法模拟的ECMAScript 5特性。Vue支持所有兼容ECMAScript 5的浏览器。</strong></p>
<h1 id="cdn">CDN</h1>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--下载离线包--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<h1 id="vue程序案例">Vue程序案例</h1>
<p><strong>创建html</strong></p>
<pre><code class="language-html"><div><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

    <span class="hljs-comment">&lt;!--1. 引入vue.js--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>           <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"</span>&gt;</span><span class="undefined">
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- 2.创建一个Vue实例--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-keyword">var</span> vm;
        <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 加载完后执行</span>
            vm = <span class="hljs-keyword">new</span> Vue({
                <span class="hljs-attr">el</span>: <span class="hljs-string">"#vue"</span>, <span class="hljs-comment">// 绑定在id为vue的标签上</span>
                data: {  <span class="hljs-comment">// 监听对象的数据</span>
                    <span class="hljs-comment">//监听message（可以自己定义）</span>
                    <span class="hljs-comment">//初始化为HelloVue!</span>
                    message: <span class="hljs-string">'HelloVue!'</span>
                    
                }
            })
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-comment">&lt;!--3. 绑定vue，使用{{}}就能实现数据绑定--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"vue"</span>&gt;</span>
        {{message}} 
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<p><strong>运行结果</strong></p>
<p><img src="" alt="image-20201119101119361"></p>
<p><strong>在命令台上执行vm.message = 'Demo!'后</strong></p>
<p><img src="" alt="image-20201119100848013"></p>
<h1 id="基础语法">基础语法</h1>
<h2 id="1-v-bind">1. v-bind</h2>
<p>使用v-bind:原生属性值，例如：v-bind:title=&quot;data中的成员&quot;。v-bind的简写直接使用':'字符， 例如：</p>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--加载vue--&gt;</span>
<span class="hljs-comment">&lt;!-- 使用方法：
    &lt;div :title="data中的成员"&gt;&lt;/div&gt;
--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"vue"</span>&gt;</span>
    {{message}}
    <span class="hljs-comment">&lt;!-- 原生的 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"原生"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!--可以是变量可以是常量，常量使用vue无意义！--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"'鼠标悬浮显示的文字！'"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"message"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"message"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div></code></pre>
<h2 id="2-v-if系列">2. v-if系列</h2>
<p>条件分支；js中 === 表示绝对相等（数据与数据类型都要相等）；</p>
<ul>
<li>v-if</li>
<li>v-else-if</li>
<li>v-else</li>
</ul>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--省略外部标签, 下面同理--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"choose === 'A'"</span>&gt;</span>
    A
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"choose === 'B'"</span>&gt;</span>
    B
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>=<span class="hljs-string">"choose === 'C'"</span>&gt;</span>
    C
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
    <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#vue"</span>, <span class="hljs-comment">// 绑定在id为vue的标签上</span>
        data: { 
            choose: <span class="hljs-string">'A'</span>,
        }
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-comment">&lt;!--使用 vm.choose 改变值--&gt;</span>

</div></code></pre>
<h2 id="3-v-for">3. v-for</h2>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span>&gt;</span>
{{item}}
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!-- 如果item是对象，可以使用'.'运算符得到下面的值。js中对数组进行push操作可以动态添加. (item, index) in items, 得到下标 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
    <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#vue"</span>, <span class="hljs-comment">// 绑定在id为vue的标签上</span>
        data: {  <span class="hljs-comment">// 监听对象的数据</span>
            items: [<span class="hljs-string">'Hi1'</span>, <span class="hljs-string">"Hi2"</span>, <span class="hljs-string">"Hi3"</span>]
        }
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>           
</div></code></pre>
<h2 id="4-v-on">4. v-on</h2>
<p>绑定监听事件，绑定的是vue的事件，可以绑定vue下methods中的方法！v-on:click可以简写为 @click.传递参数,直接在函数中加入say(xxx). 事件修饰符直接使用'.'运算符,例如: @keyup.enter=&quot;fun&quot;,点击回车执行fun</p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"say"</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"say"</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
    <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#vue"</span>, <span class="hljs-comment">// 绑定在id为vue的标签上</span>
        methods: {
            say: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
                <span class="hljs-comment">//this指向当前vue实例，使用this操作数据</span>
                <span class="hljs-comment">//alert(this.message)</span>
                alert(<span class="hljs-string">'Hi!'</span>);
            }
        }
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>   
</div></code></pre>
<h2 id="5-v-model">5. v-model</h2>
<p>使用v-model双向绑定数据，vue能改变html中的值，html中能直接改变vue对象中的值。</p>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!-- v-bind:value只能进行单向的数据渲染 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-bind:value</span>=<span class="hljs-string">"choose"</span>&gt;</span>
<span class="hljs-comment">&lt;!-- v-model 可以进行双向的数据绑定 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"choose"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>您要查询的是：{{choose}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>单复选框：{{checked}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

<span class="hljs-comment">&lt;!--下拉框、单选框、复选框同理。复选框使用数组保存选中的值--&gt;</span>
</div></code></pre>
<p>值会跟随右侧input变化</p>
<p><img src="" alt="image-20201119111910726"></p>
<h2 id="其他指令">其他指令</h2>
<p>加载html标签:v-html</p>
<p>加载文本,替换标签内所有:v-text</p>
<p>切换显示隐藏: v-show 可以使用表达式,本质是修改display</p>
<h1 id="组件">组件</h1>
<h2 id="组件构建方法">组件构建方法</h2>
<h3 id="1-使用extend构建">1. 使用extend构建</h3>
<pre><code class="language-js"><div><span class="hljs-keyword">var</span> myCom = Vue.extend({
    <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;这是我的组件&lt;/div&gt;'</span>
})
</div></code></pre>
<h3 id="2-使用template构建">2. 使用template构建</h3>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myCom"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>这是template标签构建的组件<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div></code></pre>
<h3 id="3-使用script构建">3. 使用script构建</h3>
<p>需要给组件id， 同时加上type=&quot;text/x-template&quot;</p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myCom1"</span>&gt;</span><span class="handlebars"><span class="xml">
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>这是script标签构建的组件<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<h2 id="组件注册">组件注册</h2>
<pre><code class="language-js"><div><span class="hljs-comment">//全局注册</span>
Vue.component(<span class="hljs-string">'组件名'</span>, myCom)
Vue.component(<span class="hljs-string">"组件名"</span>, {
    <span class="hljs-attr">template</span>: <span class="hljs-string">'html标签'</span>
})
<span class="hljs-comment">//使用template和script构建的</span>
Vue.component(<span class="hljs-string">'my-com'</span>,{
    <span class="hljs-attr">template</span>: <span class="hljs-string">'#id'</span>
})
<span class="hljs-comment">//局部注册</span>
<span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
    <span class="hljs-attr">components</span>: {
        <span class="hljs-string">'组件名'</span>: xxxx
    }
})
<span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
    <span class="hljs-attr">components</span>: {
        <span class="hljs-string">'组件名'</span>: {
           <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;div&gt;这是我的组件&lt;/div&gt;'</span>
        }
    }
})
<span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
    <span class="hljs-attr">components</span>: {
        <span class="hljs-string">'组件名'</span>: {
           <span class="hljs-attr">template</span>: <span class="hljs-string">'#id'</span>
        }
    }
})
</div></code></pre>
<p>组件是可复用的vue实例，重复使用的模板。</p>
<p><strong>使用Vue.component()方法全局注册组件</strong></p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
<span class="hljs-comment">// 先注册组件</span>
Vue.component(<span class="hljs-string">'myli'</span>, {
template: <span class="hljs-string">'&lt;li&gt;Hello li&lt;/li&gt;'</span><span class="hljs-comment">// 开发中不会这么开发组件</span>
});
<span class="hljs-comment">// 再实例化 Vue</span>
<span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">'对应的id'</span>
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-comment">&lt;!--使用方法--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">myli</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">myli</span>&gt;</span>
</div></code></pre>
<h2 id="异步引入组件">异步引入组件</h2>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--head.html文件--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    这是头部
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-comment">&lt;!-- index --&gt;</span>
<span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>vue组件<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">head-com</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">head-com</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
        Vue.component(<span class="hljs-string">'head-com'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(resolve, reject)</span> </span>{
            $.get(<span class="hljs-string">"./head.html"</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(res)</span> </span>{
                resolve({
                    template: res
                })
            });
        });
<span class="hljs-comment">/*
	es6 规规范引入
	Vue.component('head-com', () =&gt; import("xxxx"));
        });

*/</span>
        <span class="hljs-keyword">var</span> app1 = <span class="hljs-keyword">new</span> Vue({
            el: <span class="hljs-string">'#app1'</span>
        });

    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ 
    <span class="hljs-built_in">window</span>.$vm = <span class="hljs-keyword">new</span> Vue({
        <span class="hljs-attr">el</span>: <span class="hljs-string">"#app"</span>, 
        <span class="hljs-attr">data</span>: {  
        },
        <span class="hljs-attr">computed</span>: {
        },
        <span class="hljs-attr">router</span>: <span class="hljs-built_in">window</span>.$router,
        <span class="hljs-attr">components</span>: {
            <span class="hljs-string">"navi"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve, reject</span>)</span>{
                axios.get(<span class="hljs-string">"./template/navi.html"</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>{
                    resolve({
                        <span class="hljs-attr">template</span>: res.data,                
                        <span class="hljs-attr">methods</span>: {
                            handleSelect(key, keyPath) {
                                <span class="hljs-comment">//console.log("路由path" + this.$route.path);</span>
                                <span class="hljs-comment">// this.$set(this.$data, "activeIndex2", 3)</span>
                                <span class="hljs-comment">// this.data = 3;</span>
                                <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.activeIndex2);
                                <span class="hljs-comment">// this.$set(this.data, "activeIndex2", 1)</span>
                                <span class="hljs-comment">// this.activeIndex2 = 1;</span>
                                <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.activeIndex2);
                                <span class="hljs-built_in">console</span>.log(key, keyPath);
                            }
                        }
                    })
                })
            }
        },

    })
}
</div></code></pre>
<h2 id="传递参数到组件中">传递参数到组件中</h2>
<p>使用props属性</p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript">
<span class="hljs-comment">// 先注册组件</span>
Vue.component(<span class="hljs-string">'myli'</span>, {
props: [‘item’],
template: <span class="hljs-string">'&lt;li&gt;Hello {{item}}&lt;/li&gt;'</span><span class="hljs-comment">// 开发中不会这么开发组件</span>
});
<span class="hljs-comment">// 再实例化 Vue</span>
<span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">'容器选择器'</span>,
data: {
    items: [xxxx]
}
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-comment">&lt;!--使用方法, 将遍历的item传入组件中，v-bind:item代表组件内部的属性--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">myli</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">v-bind:item</span>=<span class="hljs-string">"item"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">myli</span>&gt;</span>


<span class="hljs-comment">&lt;!--在props中指定传入参数类型， Object， Function， String等--&gt;</span>



<span class="hljs-comment">&lt;!-- props的其他属性 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
Vue.component(<span class="hljs-string">'my-component'</span>, {
  <span class="hljs-attr">props</span>: {
    <span class="hljs-comment">// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)</span>
    propA: <span class="hljs-built_in">Number</span>,
    <span class="hljs-comment">// 多个可能的类型</span>
    propB: [<span class="hljs-built_in">String</span>, <span class="hljs-built_in">Number</span>],
    <span class="hljs-comment">// 必填的字符串</span>
    propC: {
      <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>,
      <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>
    },
    <span class="hljs-comment">// 带有默认值的数字</span>
    propD: {
      <span class="hljs-attr">type</span>: <span class="hljs-built_in">Number</span>,
      <span class="hljs-attr">default</span>: <span class="hljs-number">100</span>
    },
    <span class="hljs-comment">// 带有默认值的对象</span>
    propE: {
      <span class="hljs-attr">type</span>: <span class="hljs-built_in">Object</span>,
      <span class="hljs-comment">// 对象或数组默认值必须从一个工厂函数获取</span>
      <span class="hljs-keyword">default</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> { <span class="hljs-attr">message</span>: <span class="hljs-string">'hello'</span> }
      }
    },
    <span class="hljs-comment">// 自定义验证函数</span>
    propF: {
      <span class="hljs-attr">validator</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
        <span class="hljs-comment">// 这个值必须匹配下列字符串中的一个</span>
        <span class="hljs-keyword">return</span> [<span class="hljs-string">'success'</span>, <span class="hljs-string">'warning'</span>, <span class="hljs-string">'danger'</span>].indexOf(value) !== <span class="hljs-number">-1</span>
      }
    }
  }
})
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<h2 id="函数化组件render">函数化组件(Render)</h2>
<pre><code class="language-js"><div>render: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">createElement</span>) </span>{
  <span class="hljs-keyword">return</span> createElement(<span class="hljs-string">'h1'</span>, <span class="hljs-keyword">this</span>.blogTitle)
}
</div></code></pre>
<h3 id="createelement-参数">createElement 参数</h3>
<p>接下来你需要熟悉的是如何在 <code>createElement</code> 函数中使用模板中的那些功能。这里是 <code>createElement</code> 接受的参数：</p>
<pre><code class="language-js"><div><span class="hljs-comment">// @returns {VNode}</span>
createElement(
  <span class="hljs-comment">// {String | Object | Function}</span>
  <span class="hljs-comment">// 一个 HTML 标签名、组件选项对象，或者</span>
  <span class="hljs-comment">// resolve 了上述任何一种的一个 async 函数。必填项。</span>
  <span class="hljs-string">'div'</span>,

  <span class="hljs-comment">// {Object}</span>
  <span class="hljs-comment">// 一个与模板中 attribute 对应的数据对象。可选。====模板参见，参照=====</span>
   {
       <span class="hljs-attr">attrs</span>: {
           <span class="hljs-attr">name</span>: headingId,
           <span class="hljs-attr">href</span>: <span class="hljs-string">'#'</span> + headingId
       }
   },

  <span class="hljs-comment">// {String | Array}</span>
  <span class="hljs-comment">// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，</span>
  <span class="hljs-comment">// 也可以使用字符串来生成“文本虚拟节点”。可选。</span>
  [
    <span class="hljs-string">'先写一些文字'</span>,
    createElement(<span class="hljs-string">'h1'</span>, <span class="hljs-string">'一则头条'</span>),
    createElement(MyComponent, {
      <span class="hljs-attr">props</span>: {
        <span class="hljs-attr">someProp</span>: <span class="hljs-string">'foobar'</span>
      }
    })
  ]
)

Vue.component(<span class="hljs-string">'anchored-heading'</span>, {
    <span class="hljs-attr">props</span>: {
        <span class="hljs-attr">level</span>: {
            <span class="hljs-attr">type</span>: <span class="hljs-built_in">Number</span>,
            <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>
        },
        <span class="hljs-attr">render</span>: <span class="hljs-built_in">Function</span>
    },
    <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">createElement, opt</span>) </span>{
        <span class="hljs-built_in">console</span>.log(opt);
        <span class="hljs-built_in">console</span>.log(createElement(
            <span class="hljs-string">'h'</span> + <span class="hljs-keyword">this</span>.level,   <span class="hljs-comment">// 标签名称</span>
            <span class="hljs-keyword">this</span>.$slots.default <span class="hljs-comment">// 子节点数组</span>
        ));
        <span class="hljs-keyword">return</span> createElement(
            <span class="hljs-string">'h'</span> + <span class="hljs-keyword">this</span>.level,   <span class="hljs-comment">// 标签名称</span>
            [createElement(<span class="hljs-string">"div"</span>, [<span class="hljs-string">'div123'</span>])]) <span class="hljs-comment">// 子节点数组</span>
    }
})


render: <span class="hljs-function">(<span class="hljs-params">h, opt</span>) =&gt;</span> { <span class="hljs-comment">// 脚手架写法</span>
    <span class="hljs-keyword">const</span> params = {
        <span class="hljs-attr">row</span>: opt.props.row,
        <span class="hljs-attr">index</span>: opt.props.index,
        <span class="hljs-attr">data</span>: opt.props.data,
    };
    <span class="hljs-keyword">if</span>(opt.props.column) params.column = opt.props.column;
    <span class="hljs-keyword">return</span> opt.props.render(h, params);
}
</div></code></pre>
<pre><code class="language-js"><div>components: {
    <span class="hljs-attr">Render</span>: {
        <span class="hljs-attr">props</span>: {
            <span class="hljs-attr">level</span>: {
                <span class="hljs-attr">type</span>: <span class="hljs-built_in">Number</span>,
                    <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>
            },
                <span class="hljs-attr">render</span>: <span class="hljs-built_in">Function</span>
        },
            <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">createElement</span>) </span>{
                <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>);
                <span class="hljs-built_in">console</span>.log(createElement(
                    <span class="hljs-string">'h'</span> + <span class="hljs-keyword">this</span>.level,   <span class="hljs-comment">// 标签名称</span>
                    <span class="hljs-keyword">this</span>.$slots.default <span class="hljs-comment">// 子节点数组</span>
                ));
                <span class="hljs-keyword">return</span> createElement(
                    <span class="hljs-string">'h'</span> + <span class="hljs-keyword">this</span>.level,   <span class="hljs-comment">// 标签名称</span>
                    [createElement(<span class="hljs-string">"div"</span>, [<span class="hljs-string">'div123'</span>])]) <span class="hljs-comment">// 子节点数组</span>
                
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.render(createElemtnt)
            }
    }
}
</div></code></pre>
<h3 id="参照与模板中-attribute-对应的数据对象createelement-参数">参照:[与模板中 attribute 对应的数据对象](###createElement 参数)</h3>
<pre><code class="language-js"><div>{
  <span class="hljs-comment">// 与 `v-bind:class` 的 API 相同，</span>
  <span class="hljs-comment">// 接受一个字符串、对象或字符串和对象组成的数组</span>
  <span class="hljs-string">'class'</span>: {
    <span class="hljs-attr">foo</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">bar</span>: <span class="hljs-literal">false</span>
  },
  <span class="hljs-comment">// 与 `v-bind:style` 的 API 相同，</span>
  <span class="hljs-comment">// 接受一个字符串、对象，或对象组成的数组</span>
  style: {
    <span class="hljs-attr">color</span>: <span class="hljs-string">'red'</span>,
    <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'14px'</span>
  },
  <span class="hljs-comment">// 普通的 HTML attribute</span>
  attrs: {
    <span class="hljs-attr">id</span>: <span class="hljs-string">'foo'</span>
  },
  <span class="hljs-comment">// 组件 prop</span>
  props: {
    <span class="hljs-attr">myProp</span>: <span class="hljs-string">'bar'</span>
  },
  <span class="hljs-comment">// DOM property</span>
  domProps: {
    <span class="hljs-attr">innerHTML</span>: <span class="hljs-string">'baz'</span>
  },
  <span class="hljs-comment">// 事件监听器在 `on` 内，</span>
  <span class="hljs-comment">// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。</span>
  <span class="hljs-comment">// 需要在处理函数中手动检查 keyCode。</span>
  on: {
    <span class="hljs-attr">click</span>: <span class="hljs-keyword">this</span>.clickHandler
  },
  <span class="hljs-comment">// 仅用于组件，用于监听原生事件，而不是组件内部使用</span>
  <span class="hljs-comment">// `vm.$emit` 触发的事件。</span>
  nativeOn: {
    <span class="hljs-attr">click</span>: <span class="hljs-keyword">this</span>.nativeClickHandler
  },
  <span class="hljs-comment">// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`</span>
  <span class="hljs-comment">// 赋值，因为 Vue 已经自动为你进行了同步。</span>
  directives: [
    {
      <span class="hljs-attr">name</span>: <span class="hljs-string">'my-custom-directive'</span>,
      <span class="hljs-attr">value</span>: <span class="hljs-string">'2'</span>,
      <span class="hljs-attr">expression</span>: <span class="hljs-string">'1 + 1'</span>,
      <span class="hljs-attr">arg</span>: <span class="hljs-string">'foo'</span>,
      <span class="hljs-attr">modifiers</span>: {
        <span class="hljs-attr">bar</span>: <span class="hljs-literal">true</span>
      }
    }
  ],
  <span class="hljs-comment">// 作用域插槽的格式为</span>
  <span class="hljs-comment">// { name: props =&gt; VNode | Array&lt;VNode&gt; }</span>
  scopedSlots: {
    <span class="hljs-attr">default</span>: <span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> createElement(<span class="hljs-string">'span'</span>, props.text)
  },
  <span class="hljs-comment">// 如果组件是其它组件的子组件，需为插槽指定名称</span>
  slot: <span class="hljs-string">'name-of-slot'</span>,
  <span class="hljs-comment">// 其它特殊顶层 property</span>
  key: <span class="hljs-string">'myKey'</span>,
  <span class="hljs-attr">ref</span>: <span class="hljs-string">'myRef'</span>,
  <span class="hljs-comment">// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，</span>
  <span class="hljs-comment">// 那么 `$refs.myRef` 会变成一个数组。</span>
  refInFor: <span class="hljs-literal">true</span>
}
</div></code></pre>
<h2 id="插槽slot">插槽<code>&lt;slot&gt;</code></h2>
<p>定义组件时，预留slot预留一个插槽,分发标签到下面去。</p>
<p>插槽绑定要插入谁:定义时使用name属性指定插槽名, 父组件插入使用slot插入对应的插槽.</p>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--name属性指定插槽名--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"slot1"</span>&gt;</span>
        
    <span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"slot2"</span>&gt;</span>
    
    <span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!--插入某个插槽--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"slot1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"slot2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div></code></pre>
<p>使用v-bind传入参数.</p>
<h3 id="自定义事件"><strong>自定义事件</strong></h3>
<p>使用组件上原生的事件创建事件:this.$emit('自定义事件', 参数...)</p>
<p>使用v-on:绑定事件=&quot;执行的方法&quot;</p>
<h1 id="自定义指令重点">自定义指令（重点）</h1>
<p>自定义指令用于操作dom，上官网学习</p>
<p><a href="https://cn.vuejs.org/v2/guide/custom-directive.html">https://cn.vuejs.org/v2/guide/custom-directive.html</a></p>
<h1 id="计算属性重点">计算属性（重点）</h1>
<p>有计算能力，它是个属性。</p>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!-- methods 与computed中的方法不能重名 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">var</span> vue = <span class="hljs-keyword">new</span> Vue({
    <span class="hljs-attr">el</span>: <span class="hljs-string">'容器选择器'</span>,
    <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">message</span>: <span class="hljs-string">'Hello Vue'</span>
    },
    <span class="hljs-attr">methods</span>: {
        <span class="hljs-attr">currentTime1</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Date</span>.now();
    }
    },
    <span class="hljs-attr">computed</span>: {
        <span class="hljs-comment">//currentTime2 ，这是一个属性！不是方法</span>
        currentTime2: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-comment">//存在data中的值，该值在外部，改变，方法中的缓存就会刷新。</span>
        	<span class="hljs-keyword">return</span> <span class="hljs-built_in">Date</span>.now();
    	}
	}
})
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
    使用计算属性：{{currentTime2}}
    <span class="hljs-comment">&lt;!--直接用名--&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
    调用方法: {{currentTime1()}}
    <span class="hljs-comment">&lt;!--使用时带括号--&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
</div></code></pre>
<pre><code class="language-html"><div> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
     <span class="hljs-keyword">var</span> vm;
     <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 加载完后执行</span>
         vm = <span class="hljs-keyword">new</span> Vue({
             <span class="hljs-attr">el</span>: <span class="hljs-string">"容器选择器"</span>,
             <span class="hljs-attr">data</span>: {  <span class="hljs-comment">// 监听对象的数据</span>
                 <span class="hljs-comment">//监听message（可以自己定义）</span>
                 <span class="hljs-comment">//初始化为HelloVue!</span>
                 choose: <span class="hljs-string">'A'</span>,
             },
             <span class="hljs-attr">computed</span>: {
                 <span class="hljs-attr">comp</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                     <span class="hljs-keyword">this</span>.choose;
                     <span class="hljs-keyword">return</span> <span class="hljs-built_in">Date</span>.now();
                 }
             }
         })
     }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>  
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- v-bind:value只能进行单向的数据渲染 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-bind:value</span>=<span class="hljs-string">"choose"</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- v-model 可以进行双向的数据绑定 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"choose"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>您要查询的是：{{choose}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>单复选框：{{checked}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>   
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{comp}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

</div></code></pre>
<p>改变值之前：</p>
<p><img src="" alt="image-20201119115051922"></p>
<p>改变值之后：</p>
<p><img src="" alt="image-20201119115120491"></p>
<p>调用方法时，计算的过程会产生系统的开销。<strong>计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;</strong></p>
<pre><code class="language-html"><div><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

    <span class="hljs-comment">&lt;!--1. 引入vue.js--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>           <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"</span>&gt;</span><span class="undefined">
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

    <span class="hljs-comment">&lt;!-- 2.创建一个Vue实例--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-keyword">var</span> vm;
        <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 加载完后执行</span>
            vm = <span class="hljs-keyword">new</span> Vue({
                <span class="hljs-attr">el</span>: <span class="hljs-string">"#vue"</span>, <span class="hljs-comment">// 绑定在id为vue的标签上</span>
                data: {  <span class="hljs-comment">// 监听对象的数据</span>
                    <span class="hljs-comment">//监听message（可以自己定义）</span>
                    <span class="hljs-comment">//初始化为HelloVue!</span>
                    message: <span class="hljs-string">'HelloVue!'</span>,
                    <span class="hljs-attr">choose</span>: <span class="hljs-string">'A'</span>,
                    <span class="hljs-attr">items</span>: [<span class="hljs-string">'Hi1'</span>, <span class="hljs-string">"Hi2"</span>, <span class="hljs-string">"Hi3"</span>],
                    <span class="hljs-attr">checked</span>: <span class="hljs-literal">false</span>
                },
                <span class="hljs-attr">methods</span>: {
                    <span class="hljs-attr">say</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                        <span class="hljs-comment">//this指向当前vue实例</span>
                        <span class="hljs-comment">//alert(this.message)</span>
                        alert(<span class="hljs-string">'Hi!'</span>);
                    }
                },
                <span class="hljs-attr">computed</span>: {
                    <span class="hljs-attr">comp</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                        <span class="hljs-keyword">this</span>.choose;
                        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Date</span>.now();
                    }
                }
            })
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-comment">&lt;!--3. 绑定vue，使用--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"vue"</span>&gt;</span>
        {{message}}
        <span class="hljs-comment">&lt;!-- 原生的 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"原生"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-comment">&lt;!--可以是变量可以是常量，常量使用vue无意义！--&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"'鼠标悬浮显示的文字！'"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:title</span>=<span class="hljs-string">"message"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"message"</span>&gt;</span>悬浮显示<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"choose === 'A'"</span>&gt;</span>
            A
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"choose === 'B'"</span>&gt;</span>
            B
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>=<span class="hljs-string">"choose === 'C'"</span>&gt;</span>
            C
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span>&gt;</span>
            {{item}}
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"say"</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"say"</span>&gt;</span>点击我<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-bind:value只能进行单向的数据渲染 --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-bind:value</span>=<span class="hljs-string">"choose"</span>&gt;</span>
            <span class="hljs-comment">&lt;!-- v-model 可以进行双向的数据绑定 --&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"choose"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>您要查询的是：{{choose}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>单复选框：{{checked}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>   
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{{comp}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>         
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<h1 id="axios建议的网络请求避免节点操作频繁">axios（建议的网络请求，避免节点操作频繁）</h1>
<p>引入js:<a href="https://unpkg.com/axios/dist/axios.min.js">https://unpkg.com/axios/dist/axios.min.js</a></p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/axios/dist/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<pre><code class="language-js"><div>axios.get(地址?参数).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>)</span>{<span class="hljs-comment">//响应后</span>

}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>)</span>{ <span class="hljs-comment">// 失败的接口</span>

})
</div></code></pre>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--v-cloak 解决闪烁问题--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
<span class="hljs-selector-attr">[v-cloak]</span> {
<span class="hljs-attribute">display</span>: none;
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div></code></pre>
<h1 id="vuecli老版vue-cli">@Vue/cli(老版vue-cli)</h1>
<blockquote>
<p>官网</p>
<p><a href="https://cli.vuejs.org/zh/guide/installation.html">https://cli.vuejs.org/zh/guide/installation.html</a></p>
<p>下载Node.js</p>
<p><a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a></p>
<p>配置环境, 下载淘宝的cnpm,npm install -g cnpm --registry=https://registry.npm.taobao.org</p>
<p>使用cnpm安装:cnpm install vue-cli -g， 注意：新版cnpm install -g @vue/cli</p>
<p>cnpm i -g @vue/cli-init # Vue CLI 3 和旧版使用了相同的vue命令, 桥接命令</p>
<p>//修改镜像源方法2：npm config set registry <a href="http://registry.npm.taobao.org/">http://registry.npm.taobao.org/</a></p>
</blockquote>
<p>由于天朝的网，用cnpm使用淘宝镜像</p>
<p>npm安装vue-cli,一直停留在deprecated request@2.88.2: request has been deprecated, see <a href="https://github.com/req">https://github.com/req</a>
①配置淘宝镜像 ：
npm config set registry <a href="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>
②重新安装vue-cli，即可成功
npm install -g @vue/cli</p>
<h2 id="完成上述操作使用">完成上述操作，使用：</h2>
<blockquote>
<p><strong>vue init webpack 工程名</strong></p>
</blockquote>
<p><img src="" alt="image-20201119203314690"></p>
<p>选No手动安装.</p>
<p><img src="" alt="image-20201119205904951"></p>
<p>根据提示操作:</p>
<pre><code class="language-bash"><div> <span class="hljs-built_in">cd</span> first
 cnpm install  <span class="hljs-comment"># (or if using yarn: yarn)</span>
 cnpm run dev
</div></code></pre>
<p><img src="" alt="image-20201120144544995"></p>
<p>注意标签间最好有间隔，会车，<strong>template只能包含一个标签</strong></p>
<p><img src="" alt="image-20201120144716434"></p>
<p><strong>对外接口中写vue的相关属性,data(),props,methods&lt;&gt;...., 写的过程中方法和变量不能重名, 使用方法如下:</strong></p>
<p><strong>data写成函数形式</strong></p>
<p><img src="" alt="image-20201120154402479"></p>
<p><img src="" alt="image-20201120154418413"></p>
<h2 id="web图形化开发没用不建议鸡肋">web图形化开发（没用，不建议，鸡肋）</h2>
<p>方法1:vue ui</p>
<p>方法2: cnpm install -g @vue/devtools</p>
<h1 id="es-6规范掌握">es 6规范掌握:</h1>
<p><strong>js使用export暴露接口,import导入接口,使用require(&quot;js路径&quot;)</strong></p>
<p>文件1:</p>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span>.say = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"demo"</span>);
}
</div></code></pre>
<p>文件2:</p>
<pre><code class="language-js"><div><span class="hljs-keyword">var</span> d = <span class="hljs-built_in">require</span>(<span class="hljs-string">"js路径,不写.js"</span>)
d.say()
</div></code></pre>
<p>webpack.config.js,必须这么写</p>
<pre><code class="language-js"><div><span class="hljs-comment">// 由于webpack是基于Nodejs构建的,因此可以导入Nodejs中的语法</span>
<span class="hljs-comment">//导入path模块</span>
<span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">"path"</span>)
<span class="hljs-built_in">module</span>.exports = {
	<span class="hljs-attr">entry</span>: <span class="hljs-string">"文件2"</span>, <span class="hljs-comment">//程序入口</span>
    <span class="hljs-comment">//entry: path.join(__dirname, js文件)</span>
    output:{
        <span class="hljs-attr">path</span>: <span class="hljs-string">"路径"</span>
        <span class="hljs-comment">//path: path.join(__dirname, "路径")</span>
        filename: <span class="hljs-string">"输出文件"</span>
    }
}
<span class="hljs-comment">//使用webpack,检查webpack.config.js,输出</span>
<span class="hljs-comment">//或者: webpack 要打包的文件的路径 -o 输出的打包好的文件路径</span>
</div></code></pre>
<p>es6规范: &quot;use strict&quot;使用严格检查模式</p>
<p>使用webpack可以打包成es5规范</p>
<p><strong>打包工具:</strong></p>
<p>cnpm install webpack -g</p>
<p>cnpm install webpack-cli -g</p>
<p>webpack热启动开发: webpack --watch</p>
<p>cnpm install webpack --save-dev 项目中安装</p>
<h2 id="commonjs模块规范">CommonJS模块规范</h2>
<p>node应用由模块组成，采用CommonJS模块规范。</p>
<p>根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。</p>
<p>CommonJS规范规定，每个模块内部，<strong>module变量代表当前模块</strong>。这个变量是一个对象，<strong>它的exports属性（即module.exports）是对外的接口</strong>。加载某个模块，其实是加载该模块的module.exports属性。</p>
<h3 id="exports-与-moduleexports">exports 与 module.exports</h3>
<h4 id="优先使用-moduleexports"><strong>优先使用 module.exports</strong></h4>
<p>为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。</p>
<pre><code class="language-js"><div><span class="hljs-keyword">var</span> exports = <span class="hljs-built_in">module</span>.exports;
</div></code></pre>
<h2 id="es6模块规范">ES6模块规范</h2>
<p>不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。</p>
<p>输出的变量就是本来的名字，但是可以使用as关键字重命名。</p>
<pre><code class="language-js"><div><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">v1</span>(<span class="hljs-params"></span>) </span>{ ... }
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">v2</span>(<span class="hljs-params"></span>) </span>{ ... }
 
<span class="hljs-keyword">export</span> {
  v1 <span class="hljs-keyword">as</span> streamV1,
  v2 <span class="hljs-keyword">as</span> streamV2,
  v2 <span class="hljs-keyword">as</span> streamLatestVersion
};
</div></code></pre>
<p>export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。</p>
<pre><code class="language-js"><div><span class="hljs-comment">// 报错</span>
<span class="hljs-keyword">export</span> <span class="hljs-number">1</span>; <span class="hljs-comment">// 输出1</span>
 
<span class="hljs-comment">// 报错</span>
<span class="hljs-keyword">var</span> m = <span class="hljs-number">1</span>; 
<span class="hljs-keyword">export</span> m; <span class="hljs-comment">// 还是输出1</span>

<span class="hljs-comment">// 正确写法,让接口名和接口变量建立联系.外部调用时</span>
<span class="hljs-comment">// 写法一</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> m = <span class="hljs-number">1</span>; 
 
<span class="hljs-comment">// 写法二</span>
<span class="hljs-keyword">var</span> m = <span class="hljs-number">1</span>;
<span class="hljs-keyword">export</span> {m};
 
<span class="hljs-comment">// 写法三</span>
<span class="hljs-keyword">var</span> n = <span class="hljs-number">1</span>;
<span class="hljs-keyword">export</span> {n <span class="hljs-keyword">as</span> m};
</div></code></pre>
<p>export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。这一点与 CommonJS 规范完全不同.CommonJS 模块输出的是值的缓存，不存在动态更新.</p>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> foo = <span class="hljs-string">'bar'</span>;
setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> foo = <span class="hljs-string">'baz'</span>, <span class="hljs-number">500</span>);
</div></code></pre>
<p>export和import命令可以出现在模块的任何位置，只要处于模块顶层就可以。<strong>如果处于块级作用域内，就会报错</strong></p>
<p>import命令输入的变量都是<strong>只读的(不能修改变量. 如果时对象,可以修改它的属性.)</strong>，因为它的本质是输入接口</p>
<pre><code class="language-js"><div><span class="hljs-comment">// 不合法</span>
<span class="hljs-keyword">import</span> {a} <span class="hljs-keyword">from</span> <span class="hljs-string">'./xxx.js'</span>
 
a = {}; <span class="hljs-comment">// Syntax Error : 'a' is read-only;</span>
<span class="hljs-comment">// 合法</span>
<span class="hljs-keyword">import</span> {a} <span class="hljs-keyword">from</span> <span class="hljs-string">'./xxx.js'</span>
 
a.foo = <span class="hljs-string">'hello'</span>; <span class="hljs-comment">// 合法操作</span>
</div></code></pre>
<p>import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。</p>
<p>export default与export的主要区别是<strong>不需要知道导出的具体变量名(懒得去和内部对应,import直接随便取名)<strong>与</strong>导入时不需要{}</strong></p>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWorld'</span>,
  data () {
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">msg</span>: <span class="hljs-string">'Welcome to Your Vue.js App'</span>
    }
  }
}
<span class="hljs-keyword">import</span> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/HelloWorld'</span>
</div></code></pre>
<h2 id="es6解构赋值">es6解构赋值</h2>
<pre><code class="language-js"><div><span class="hljs-keyword">let</span> {name, parent} = {<span class="hljs-attr">name</span>: <span class="hljs-string">"lee"</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">"Dr"</span>}
<span class="hljs-keyword">let</span> [a, , b] = [<span class="hljs-string">"lee"</span>, <span class="hljs-number">2</span>, <span class="hljs-string">"Dr"</span>] <span class="hljs-comment">// a == lee, b == "Dr"</span>
<span class="hljs-built_in">console</span>.log(name); <span class="hljs-comment">// 打印出lee</span>
<span class="hljs-built_in">console</span>.log(parent); <span class="hljs-comment">// 打印出Dr</span>
</div></code></pre>
<h1 id="vue-常用模块">vue 常用模块</h1>
<h3 id="安装axios见下面网络问题">安装axios，见下面网络问题</h3>
<h3 id="安装路由">安装路由</h3>
<pre><code class="language-bash"><div>cnpm install vue-router --save-dev
<span class="hljs-comment"># 使用组件</span>
<span class="hljs-comment"># 在App.vue中: import 模块名(VueRouter) from 模块名(vue-router)</span>
<span class="hljs-comment"># 显示使用VueRouter</span>
<span class="hljs-comment"># Vue.use(VueRouter)</span>
</div></code></pre>
<p>路由建议建一个文件夹(router&gt;index.js),</p>
<p>路由模式有两种：</p>
<p>hash：路径带 # 符号，如 <a href="http://localhost/#/login">http://localhost/#/login</a></p>
<p>history：路径不带 # 符号，如 <a href="http://localhost/login">http://localhost/login</a> 修改路由配置，代码如下：</p>
<pre><code class="language-js"><div><span class="hljs-comment">//需要导入vue,vue-router</span>
<span class="hljs-comment">//使用Vue.use  vue-router</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({
    <span class="hljs-attr">routes</span>:[
        {
            <span class="hljs-comment">//路由的路径</span>
            path: <span class="hljs-string">'/路径'</span>, 
            <span class="hljs-attr">name</span>: <span class="hljs-string">"路由名,可省略"</span>, 
            <span class="hljs-comment">//跳转的组件</span>
            component: 导入的主键,<span class="hljs-comment">// 使用import 导入组件</span>
            mode: <span class="hljs-string">'history'</span>
        }
    ]
}) 

</div></code></pre>
<p>配置路由:在main.js中</p>
<pre><code class="language-js"><div><span class="hljs-comment">//导入router.js 名为router</span>
<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
  router,
  <span class="hljs-attr">components</span>: { App },
  <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>
})
</div></code></pre>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"跳转的路由"</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">"渲染成哪种标签"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
<span class="hljs-comment">&lt;!-- 使用router-view 展示 --&gt;</span>

</div></code></pre>
<p>具体代码:</p>
<pre><code class="language-js"><div><span class="hljs-comment">//router.js</span>
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">"vue-router"</span>
<span class="hljs-keyword">import</span> HelloWorld <span class="hljs-keyword">from</span> <span class="hljs-string">"./../components/HelloWorld"</span> 


Vue.use(VueRouter)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> VueRouter({
    <span class="hljs-attr">routes</span>: [{
        <span class="hljs-attr">path</span>: <span class="hljs-string">"/helloword"</span>,
        <span class="hljs-attr">component</span>: HelloWorld
    }]
})
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>
<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">"./router"</span>

Vue.config.productionTip = <span class="hljs-literal">false</span>

<span class="hljs-comment">/* eslint-disable no-new */</span>
<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
  router, <span class="hljs-comment">//等同于router: router</span>
  components: { App },
  <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;App/&gt;'</span>
})
</div></code></pre>
<h2 id="样式">样式</h2>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!--scoped 只在当前页面生效--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined">
    
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

</div></code></pre>
<h1 id="打包"><strong>打包</strong></h1>
<p>方法1: 打包前修改config文件夹下的index.js中的assetsPublicPath：
一共有两个，需要将“/”改为&quot;./&quot;, <strong>打包后修改回去</strong></p>
<p>方法2: 打包完成后,修改html中的路径改为./</p>
<p>修改图示位置:</p>
<p><img src="" alt="image-20201120165314211"></p>
<p>使用: npm run build打包</p>
<p>样式路径：</p>
<p><img src="" alt="image-20210130160420495"></p>
<h2 id="解决ie浏览器兼容性">解决IE浏览器兼容性</h2>
<p>babel-polyfill</p>
<p><a href="https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist">https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist</a></p>
<p>查看浏览器运行范围</p>
<p><img src="" alt="image-20201120174102134"></p>
<p>1.在项目中安装babel-polyfill，npm install --save babel-polyfill</p>
<p>2.在index.html里面加上：<meta http-equiv="X-UA-Compatible" content="IE=edge" /></p>
<p>3.在main.js里面加入  import 'babel-polyfill'</p>
<p>4.webpack.base.conf.js下修改配置项：</p>
<p>module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: [&quot;babel-polyfill&quot;, &quot;./src/main.js&quot;]
}</p>
<p>.....}
5.重新运行程序 重新运行程序  重新运行程序 重要的事情说三遍，一定要重新运行</p>
<p>然后用IE浏览器访问程序，显示正常。</p>
<h1 id="网络接口问题">网络接口问题</h1>
<p>使用axios-js: <a href="http://axios-js.com/">http://axios-js.com/</a></p>
<pre><code class="language-bash"><div>npm install axios
</div></code></pre>
<p>vue整合:<a href="http://axios-js.com/zh-cn/docs/vue-axios.html">http://axios-js.com/zh-cn/docs/vue-axios.html</a></p>
<pre><code class="language-bash"><div>npm install --save axios vue-axios
</div></code></pre>
<p>导入:</p>
<pre><code class="language-js"><div><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>
<span class="hljs-keyword">import</span> VueAxios <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-axios'</span>

Vue.use(VueAxios, axios)
<span class="hljs-comment">// 按照这个顺序分别引入这三个文件： vue, axios and vue-axios</span>
</div></code></pre>
<p>使用方法:</p>
<pre><code class="language-js"><div><span class="hljs-comment">//部分案例:</span>
Vue.axios.get(api).then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> {
  <span class="hljs-built_in">console</span>.log(response.data)
})

<span class="hljs-keyword">this</span>.axios.get(api).then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> {
  <span class="hljs-built_in">console</span>.log(response.data)
})

<span class="hljs-keyword">this</span>.$http.get(api).then(<span class="hljs-function">(<span class="hljs-params">response</span>) =&gt;</span> {
  <span class="hljs-built_in">console</span>.log(response.data)
})
</div></code></pre>
<h4 id="建议封装接口">建议封装接口</h4>
<pre><code class="language-js"><div><span class="hljs-comment">// http.js</span>
<span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;
<span class="hljs-comment">/**
 * 配置拦截器
 */</span>
axios.interceptors.response.use(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
    <span class="hljs-keyword">return</span> res.data;
});
<span class="hljs-keyword">const</span> headers = {
    <span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'application/json'</span>
};
<span class="hljs-keyword">const</span> config = {
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span>
};
<span class="hljs-keyword">const</span> http = {
    <span class="hljs-keyword">get</span>(url, params, headers = headers, config = {...config}){
        <span class="hljs-keyword">return</span> axios.get(url, {
            <span class="hljs-attr">params</span>: params,
            <span class="hljs-attr">headers</span>: headers,
            ...config
        })
    },
    post(url, params, headers = headers, config = {...config}){
        <span class="hljs-keyword">return</span> axios.get(url, {
            <span class="hljs-attr">params</span>: params,
            <span class="hljs-attr">headers</span>: headers,
            ...config
        })
    },
    <span class="hljs-keyword">delete</span>(url, params, headers = headers, config = {...config}){
        <span class="hljs-keyword">return</span> axios.get(url, {
            <span class="hljs-attr">params</span>: params,
            <span class="hljs-attr">headers</span>: headers,
            ...config
        })
    },
    put(url, params, headers = headers, config = {...config}){
        <span class="hljs-keyword">return</span> axios.get(url, {
            <span class="hljs-attr">params</span>: params,
            <span class="hljs-attr">headers</span>: headers,
            ...config
        })
    },
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> http;

<span class="hljs-comment">//index.js</span>
<span class="hljs-keyword">import</span> http <span class="hljs-keyword">from</span> <span class="hljs-string">"./http"</span>


<span class="hljs-keyword">let</span> getUrl = <span class="hljs-function">(<span class="hljs-params">url</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> <span class="hljs-string">"/api/"</span> + url;
};

<span class="hljs-keyword">const</span> interfaces = {
    test() {
        <span class="hljs-keyword">return</span> http.get(getUrl(<span class="hljs-string">"test2"</span>), {
            <span class="hljs-attr">res</span>: <span class="hljs-string">"data"</span>
        })
    },
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> interfaces;

<span class="hljs-comment">//使用 </span>
<span class="hljs-keyword">import</span> http <span class="hljs-keyword">from</span> <span class="hljs-string">"@/http"</span>
http.test().then().catch();

</div></code></pre>
<p><img src="" alt="image-20210117191516895"></p>
<p><img src="" alt="image-20210117191534342"></p>
<p><strong>自己的规范（不要当成标准），在 static 文件夹下新建一个名为config 的文件夹，建立index.js,内容如下：</strong></p>
<pre><code class="language-js"><div><span class="hljs-built_in">window</span>.iBaseUrl = <span class="hljs-string">"***"</span>;
<span class="hljs-built_in">window</span>.fixUrl = <span class="hljs-string">"####"</span>;
<span class="hljs-built_in">window</span>.iUrl = {
    <span class="hljs-attr">xxxx</span>: <span class="hljs-built_in">window</span>.iBaseUrl + yyy + <span class="hljs-built_in">window</span>.fixUrl,
    <span class="hljs-attr">xxxx</span>: <span class="hljs-built_in">window</span>.iBaseUrl + yyy + <span class="hljs-built_in">window</span>.fixUrl,
}
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-built_in">window</span>.iBaseUrl = <span class="hljs-string">"http://localhost:80"</span>; <span class="hljs-comment">// 全局只加载一次</span>
<span class="hljs-built_in">window</span>.fixUrl = <span class="hljs-string">".html"</span>; <span class="hljs-comment">// 全局只加载一次</span>
<span class="hljs-keyword">const</span> interfacels = {
    <span class="hljs-attr">iUrl</span>: {
        <span class="hljs-attr">demo</span>: <span class="hljs-built_in">window</span>.iBaseUrl + <span class="hljs-string">"/demo"</span> + <span class="hljs-built_in">window</span>.fixUrl
    }
};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> interfaces;

<span class="hljs-comment">// html页面调用es6方法，使用module： &lt;script type="module" src="test.js"&gt;&lt;/script&gt;</span>
</div></code></pre>
<p>在main.js中导入</p>
<p><img src="" alt="image-20201124112436628"></p>
<p>使用时访问 Interface.iUrl.xxxx,开发时在static中建立yyy,伪数据.</p>
<h1 id="vue中调用修改data和方法">vue中调用修改data和方法</h1>
<p>this.$options.methods.方法()</p>
<p>调用data中的参数: this.参数名</p>
<p>修改data:this.set(this.$data, &quot;属性名&quot;, &quot;值&quot;)</p>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
        <span class="hljs-keyword">return</span> {
            <span class="hljs-attr">activeIndex</span>: <span class="hljs-string">'1'</span>,
            <span class="hljs-attr">activeIndex2</span>: <span class="hljs-string">'1'</span>
        };
    },
    <span class="hljs-attr">methods</span>: {
        handleSelect(key, keyPath) {
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$data);

            <span class="hljs-keyword">this</span>.data = <span class="hljs-number">3</span>;
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.activeIndex2);
            <span class="hljs-keyword">this</span>.$<span class="hljs-keyword">set</span>(this.$data, "activeIndex2", 3)//装载为string
            console.log(this.activeIndex2);
            console.log(key, keyPath);
        }
    },
    components: {
        Head
    }
}
</div></code></pre>
<h1 id="static目录">static目录</h1>
<p>不会被wabpack处理直接打包到dist/static目录下,使用时用绝对路径.</p>
<p>通过config.js文件中的build.assetsPublicPath和build.assetsSubDirectorty链接来确定.以绝对路径引用&quot;/static/xxx&quot;</p>
<p>在assets中的路径不能动态绑定,只能使用require(&quot;路径&quot;)</p>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {

	data() {

		<span class="hljs-keyword">return</span> {

			<span class="hljs-attr">assetsUrl</span>: <span class="hljs-built_in">require</span>(<span class="hljs-string">"路径"</span>),

			<span class="hljs-attr">staticUrl</span>: <span class="hljs-string">"路径"</span>

		}

	}

}

</div></code></pre>
<h1 id="事件传入参数">事件传入参数</h1>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">span</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"getdata"</span> <span class="hljs-attr">:data-id</span>=<span class="hljs-string">"xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(e.srcElement.dataset.id)
}
</div></code></pre>
<h3 id="推荐的写法">推荐的写法</h3>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">span</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"getdata(xxxx)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">a</span>)</span>{
    <span class="hljs-built_in">console</span>.log(a)
}
</div></code></pre>
<h1 id="路由">路由</h1>
<h2 id="原生路由">原生路由</h2>
<pre><code class="language-html"><div><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/x-template"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"header"</span>&gt;</span><span class="handlebars"><span class="xml">
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><span class="hljs-template-variable">{{data}}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"./src/elementUI/index.css"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./src/vue/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./src/vue/vue-router.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./src/elementUI/index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./src/axios/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-keyword">var</span> router = <span class="hljs-keyword">new</span> VueRouter({
            <span class="hljs-attr">routes</span>: [
                {
                    <span class="hljs-attr">path</span>: <span class="hljs-string">'/header'</span>,
                    <span class="hljs-attr">component</span>: {
                        <span class="hljs-attr">template</span>: <span class="hljs-string">"#header"</span>,
                        data() {
                            <span class="hljs-keyword">return</span> {
                                <span class="hljs-attr">data</span>: <span class="hljs-string">"header"</span>
                            } 
                        }
                    }
                }
            ]
        })
        <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ 
            <span class="hljs-built_in">window</span>.$vm = <span class="hljs-keyword">new</span> Vue({
                <span class="hljs-attr">el</span>: <span class="hljs-string">"#app"</span>, 
                <span class="hljs-attr">data</span>: {  
                },
                <span class="hljs-attr">methods</span>: {
                },
                <span class="hljs-attr">computed</span>: {
                },
                router
            })
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span> &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">el-scrollbar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"scroll"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height:100%"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/header"</span>&gt;</span>header<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>/&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">el-scrollbar</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</div></code></pre>
<h2 id="路由与子路由">路由与子路由</h2>
<pre><code class="language-js"><div><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({
  <span class="hljs-attr">routes</span>: [
    {
      <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-comment">// 第一层 router-link</span>
      redirect: <span class="hljs-string">"/manager"</span> <span class="hljs-comment">//重定向到这儿</span>
    },
    {
      <span class="hljs-attr">path</span>: <span class="hljs-string">"/manager"</span>, <span class="hljs-comment">//第一层</span>
      component: Menu,
      <span class="hljs-attr">children</span>: [{ <span class="hljs-comment">// 第二层</span>
        path: <span class="hljs-string">"/"</span>,
        <span class="hljs-attr">component</span>: HelloWorld
      }]
    }
  ]
})
</div></code></pre>
<h1 id="导航守卫">导航守卫</h1>
<h2 id="全局守卫">全局守卫</h2>
<p>beforeEach，afterEach可以实现<strong>全局</strong>导航守卫</p>
<pre><code class="language-js"><div><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({....})
router.beforeEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> {
    <span class="hljs-comment">// 即将进入的路由对象</span>
    <span class="hljs-comment">// 当前导航正要离开的路由</span>
    <span class="hljs-comment">// 方法结束一定确保调用next方法， resolve当前的钩子，不然无法继续执行，不能满足所有守卫的resolve都完成</span>
    <span class="hljs-comment">// next() 进行管道中的下一个钩子</span>
    <span class="hljs-comment">// next(false) 中断当前导航，url重置到from路由对应的地址</span>
    <span class="hljs-comment">// next("/") 、 next({path: "/"}),跳转到不同的地址，可以设置任何用在router-link的to属性或则router。push中的选项。</span>
    <span class="hljs-comment">// next(error), 2.4.0+ 导航会被终止且该错误会被传递给router.onError()注册过的回调。</span>
}).catch(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    <span class="hljs-comment">//跳转到失败页面</span>
    next({
            <span class="hljs-attr">path</span>: <span class="hljs-string">"/失败页面"</span>, 
            <span class="hljs-attr">replace</span>: <span class="hljs-literal">true</span>, 
            <span class="hljs-attr">query</span>: {
                <span class="hljs-attr">noBoBack</span>: <span class="hljs-literal">true</span>
            }
         })
})

</div></code></pre>
<p>导航触发时，全局前置守卫<strong>按创建顺序调用</strong>。守卫是异步解析执行，此时导航在<strong>所有守卫的resolve完成之前</strong>一直处于等待状态。<strong>方法结束一定确保调用next方法</strong></p>
<pre><code class="language-json"><div>{
    path: '/', // 第一层 router-link
    redirect: <span class="hljs-string">"/manager"</span> //重定向到这儿
},
{
    path: <span class="hljs-string">"/manager"</span>, //第一层
    component: Menu,
    mate: { // 路由元数据
    	login_require: <span class="hljs-literal">true</span> // 自定义数据login_require
	} 
    children: [{ // 第二层
	   path: <span class="hljs-string">"/"</span>,
	   component: HelloWorld
    }]
}
</div></code></pre>
<p>元数据匹配：</p>
<pre><code class="language-js"><div>router.beforeEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> {
	<span class="hljs-keyword">let</span> m = to.matched.some(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.meta.login_require);<span class="hljs-comment">// 得到元数据</span>
})
</div></code></pre>
<h2 id="组件守卫">组件守卫</h2>
<p>组件内部的导航守卫：beforeRouteEnter、beforeRouteUpdate（2.2新增）、beforeRouteLeave</p>
<p>写在对外接口中</p>
<h2 id="路由独享的守卫">路由独享的守卫</h2>
<pre><code class="language-js"><div>{
    <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>, <span class="hljs-comment">// 第一层 router-link</span>
    redirect: <span class="hljs-string">"/manager"</span> <span class="hljs-comment">//重定向到这儿</span>
},
{
    <span class="hljs-attr">path</span>: <span class="hljs-string">"/manager"</span>, <span class="hljs-comment">//第一层</span>
    component: Menu,
    <span class="hljs-attr">children</span>: [{ <span class="hljs-comment">// 第二层</span>
	   path: <span class="hljs-string">"/"</span>,
	   <span class="hljs-attr">component</span>: HelloWorld
    }],
    beforeEnter(to, <span class="hljs-keyword">from</span>, next){
        
    },
    <span class="hljs-attr">mate</span>: { <span class="hljs-comment">// 路由元数据</span>
    	login_require: <span class="hljs-literal">true</span> <span class="hljs-comment">// 自定义数据login_require</span>
	}
}
</div></code></pre>
<h4 id="跳转新页面">跳转新页面</h4>
<pre><code class="language-js"><div>
<span class="hljs-keyword">const</span>{href} = <span class="hljs-keyword">this</span>.router.resoleve({
	<span class="hljs-attr">path</span>: <span class="hljs-string">'/path'</span>,
	<span class="hljs-attr">query</span>: {
		参数名: 参数值
	}
})
<span class="hljs-built_in">window</span>.open(href, _self) <span class="hljs-comment">// 默认 _blank 新窗口</span>
</div></code></pre>
<h1 id="异步组件">异步组件</h1>
<p>定义时什么也不做，组件需要渲染时惊醒加载渲染并缓存，缓存是以备下次访问。</p>
<p>打包成异步加载的组件，在打包的时候，会打包成单独的js文件存储在static/js文件里面，调用时使用异步请求插入html中。</p>
<p>封装类似代码：</p>
<pre><code class="language-js"><div>Vue.component(<span class="hljs-string">'head-com'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>{
    $.<span class="hljs-keyword">get</span>("./head.html").then(function (res) {
        resolve({
            <span class="hljs-attr">template</span>: res
        })
    });
});
</div></code></pre>
<h2 id="webpack的代码分割">webpack的代码分割</h2>
<pre><code class="language-js"><div>{
	<span class="hljs-attr">path</span>: <span class="hljs-string">"/"</span>,
    <span class="hljs-attr">name</span>: <span class="hljs-string">"HelloWord"</span>,
    <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">resoleve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">"@/components/HelloWord"</span>], resolve)
}
<span class="hljs-comment">//require() // AMD规范</span>
</div></code></pre>
<h3 id="依赖于webpack的代码分割依赖于promisevue官网推荐">依赖于webpack的代码分割，依赖于Promise(vue官网推荐)</h3>
<pre><code class="language-js"><div>{
	<span class="hljs-attr">path</span>: <span class="hljs-string">"/"</span>,
    <span class="hljs-attr">name</span>: <span class="hljs-string">"HelloWord"</span>,
    <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">r</span> =&gt;</span> <span class="hljs-built_in">require</span>.ensure([<span class="hljs-string">"模块的依赖"</span>], () =&gt; r(<span class="hljs-built_in">require</span>(<span class="hljs-string">"../components/HelloWorld"</span>)), <span class="hljs-string">"HelloWord"</span>)
}
<span class="hljs-comment">// 参数2： 依赖加载完成后的回调函数</span>
<span class="hljs-comment">// 参数3： 名称</span>
<span class="hljs-comment">// webpack 把文件导出一个js文件，然后用到这个模块的时候，就动态构建script标签插入Dom，再由浏览器去请求。回调函数是在依赖加载完成后执行。</span>
</div></code></pre>
<h2 id="webpack-2--es-2015-代码分割">webpack 2 + ES 2015 代码分割</h2>
<pre><code class="language-java"><div>{
	path: <span class="hljs-string">"/"</span>,
    name: <span class="hljs-string">"HelloWord"</span>,
    component: () =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">"@/components/HelloWord"</span>)
}
<span class="hljs-comment">//require() // commonjs规范</span>
</div></code></pre>
<h1 id="动态添加权限菜单">动态添加权限菜单</h1>
<p>创建所有页面的资源js文件</p>
<pre><code class="language-js"><div><span class="hljs-keyword">const</span> home = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../page/Home.vue'</span>);
<span class="hljs-keyword">const</span> splashScreen = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../page/splashScreen/SplashScreen.vue'</span>);
<span class="hljs-keyword">const</span> addSplashScreen = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../page/splashScreen/AddSplashScreen.vue'</span>);
<span class="hljs-keyword">const</span> editSplashScreen = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../page/splashScreen/EditSplashScreen.vue'</span>);

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    home,
    splashScreen,
    addSplashScreen,
    editSplashScreen,
   
};
</div></code></pre>
<p>路由index.js只放通用的页面例如登录，404页面，一些不需要权限的页面</p>
<h1 id="element-ui使用">Element UI使用</h1>
<p>官网:<a href="https://element.eleme.cn/#/zh-CN/component/installation">https://element.eleme.cn/#/zh-CN/component/installation</a></p>
<p>常见的ui: layui</p>
<p>npm i element-ui -s</p>
<p>在main.js中写入以下内容:</p>
<pre><code class="language-js"><div><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;
<span class="hljs-keyword">import</span> ElementUI <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui'</span>;
<span class="hljs-comment">// 样式文件需要单独引入。</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">'element-ui/lib/theme-chalk/index.css'</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>;

Vue.use(ElementUI);
<span class="hljs-comment">//size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）</span>
<span class="hljs-comment">//Vue.use(Element, { size: 'small', zIndex: 3000 });</span>

<span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
  <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) <span class="hljs-comment">// 渲染成真实的DOM节点,并挂载到跟节点</span>
});
</div></code></pre>
<p>在el-menu-item上跳转路由:</p>
<p>1.要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。</p>
<p>2.导航当前项，在el-menu标签中绑定 :default-active=&quot;<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>r</mi><mi>o</mi><mi>u</mi><mi>t</mi><mi>e</mi><mi mathvariant="normal">.</mi><mi>p</mi><mi>a</mi><mi>t</mi><mi>h</mi><mi mathvariant="normal">&quot;</mi><mo separator="true">,</mo><mtext>注意是绑定属性，不要忘了加“</mtext><mo>:</mo><mtext>”</mtext><mo separator="true">,</mo><mtext>当</mtext></mrow><annotation encoding="application/x-tex">route.path&quot;,注意是绑定属性，不要忘了加“:”,当</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8888799999999999em;vertical-align:-0.19444em;"></span><span class="mord mathdefault" style="margin-right:0.02778em;">r</span><span class="mord mathdefault">o</span><span class="mord mathdefault">u</span><span class="mord mathdefault">t</span><span class="mord mathdefault">e</span><span class="mord">.</span><span class="mord mathdefault">p</span><span class="mord mathdefault">a</span><span class="mord mathdefault">t</span><span class="mord mathdefault">h</span><span class="mord">&quot;</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord cjk_fallback">注</span><span class="mord cjk_fallback">意</span><span class="mord cjk_fallback">是</span><span class="mord cjk_fallback">绑</span><span class="mord cjk_fallback">定</span><span class="mord cjk_fallback">属</span><span class="mord cjk_fallback">性</span><span class="mord cjk_fallback">，</span><span class="mord cjk_fallback">不</span><span class="mord cjk_fallback">要</span><span class="mord cjk_fallback">忘</span><span class="mord cjk_fallback">了</span><span class="mord cjk_fallback">加</span><span class="mord">“</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">:</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.8888799999999999em;vertical-align:-0.19444em;"></span><span class="mord">”</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord cjk_fallback">当</span></span></span></span>route.path等于el-menu-item标签中的index属性值时则该item为当前项。</p>
<p>转装sas加载器:</p>
<p>cnpm install sass-loader node-sass --save-dev</p>
<h2 id="原生代码引入">原生代码引入</h2>
<pre><code class="language-html"><div><span class="hljs-comment">&lt;!-- 引入样式 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/element-ui/lib/theme-chalk/index.css"</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 先引入, 库 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-comment">&lt;!-- 引入组件库 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/element-ui/lib/index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>
<h2 id="使用树形表格">使用树形表格</h2>
<p>在el-table中，支持树类型的数据的显示。当 row 中包含 <code>children</code> 字段时，被视为树形数据。渲染树形数据时，<strong>必须要指定 <code>row-key</code></strong>。<strong>支持子节点数据异步加载</strong>。</p>
<p>设置 Table 的 <code>lazy</code> 属性为 true 与加载函数 <code>load</code> 。通过指定 row 中的 <code>hasChildren</code> 字段来指定哪些行是包含子节点。<strong><code>children</code> 与 <code>hasChildren</code> 都可以通过 <code>tree-props</code> 配置。</strong></p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">el-table</span>
        <span class="hljs-attr">:data</span>=<span class="hljs-string">"items"</span>
        <span class="hljs-attr">row-key</span>=<span class="hljs-string">"id"</span>
        <span class="hljs-attr">:tree-props</span>=<span class="hljs-string">"{children: 'children', hasChildren: 'hasChildren'}"</span>
      &gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">el-table</span>&gt;</span>
</div></code></pre>
<p>default-expand-all属性表示默认展开，不需要展开可以删除。row-key=&quot;id&quot;和:tree-props=&quot;{children: 'children', hasChildren: 'hasChildren'}是必须的。</p>
<p><strong>表格展开</strong></p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">el-table</span>
  <span class="hljs-attr">:data</span>=<span class="hljs-string">"tableData"</span>
  <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100%"</span>
  <span class="hljs-attr">row-key</span>=<span class="hljs-string">"id"</span> 
  <span class="hljs-attr">ref</span>=<span class="hljs-string">"refTable"</span> 
  <span class="hljs-attr">:cell-class-name</span>=<span class="hljs-string">"tableCellClassName"</span>
  @<span class="hljs-attr">cell-click</span>=<span class="hljs-string">"cellClick"</span>&gt;</span>
</div></code></pre>
<pre><code class="language-js"><div> <span class="hljs-keyword">this</span>.$refs.refTable.toggleRowExpansion(row, <span class="hljs-literal">true</span>)

column.property <span class="hljs-comment">// 得到映射的属性</span>
<span class="hljs-comment">/** 
&lt;el-table-column
        prop="date" //例如:点击日期列后，column.property == "date"
        label="日期"
        width="180"&gt;
 **/</span>
<span class="hljs-comment">//解构</span>
tableCellClassName({row, column, rowIndex, columnIndex}){<span class="hljs-comment">//注意这里是解构</span>
    <span class="hljs-comment">//利用单元格的 className 的回调方法，给行列索引赋值</span>
    row.index=rowIndex;
    column.index=columnIndex;
}
<span class="hljs-comment">//触发事件中使用</span>
row.index
</div></code></pre>
<h2 id="pagination-分页">Pagination 分页</h2>
<p>此例是一个完整的用例，使用了**<code>size-change</code>和<code>current-change</code>**事件来处理页码大小和当前页变动时候触发的事件。<code>page-sizes</code>接受一个整型数组，数组元素为展示的选择每页显示个数的选项，<code>[100, 200, 300, 400]</code>表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。</p>
<h1 id="electron简单使用">Electron简单使用</h1>
<p>安装： cnpm i -D electron@latest -g</p>
<pre><code class="language-bash"><div>vue init simulatedgreg/electron-vue my-project
<span class="hljs-comment"># 安装依赖并运行你的程序</span>
<span class="hljs-built_in">cd</span> my-project
yarn <span class="hljs-comment"># 或者 npm install</span>
yarn run dev <span class="hljs-comment"># 或者 npm run dev</span>
</div></code></pre>
<p>在dist文件中创建</p>
<pre><code class="language-js"><div><span class="hljs-comment">//main.js</span>
<span class="hljs-keyword">var</span> {app, BrowserWindow} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"electron"</span>);
<span class="hljs-comment">/*
	var electron = require("electron");
	var app = electron.app // 引用app
	var BrowserWindow = electron.BrowserWindow;
*/</span>
<span class="hljs-keyword">var</span> mainWindow = <span class="hljs-literal">null</span> <span class="hljs-comment">// 声明打开的主窗口， 多处用到</span>


app.on(<span class="hljs-string">'ready'</span>, () =&gt; {
	mainWindow = <span class="hljs-keyword">new</span> BrowserWindow(
    	{
            <span class="hljs-attr">width</span>: <span class="hljs-number">800</span>,
            <span class="hljs-attr">height</span>: <span class="hljs-number">800</span>,
            <span class="hljs-attr">webPreferences</span>: { <span class="hljs-comment">// 使用node</span>
              nodeIntegration: <span class="hljs-literal">true</span>,
            }
        }
        mainWindow.loadFile(<span class="hljs-string">"index.html"</span>);<span class="hljs-comment">// 加载的html页面</span>
    	mainWindow.on(<span class="hljs-string">'closed'</span>, () =&gt; {
            mainWindow = <span class="hljs-literal">null</span>;
        })
    )    
})



<span class="hljs-comment">//main.js</span>
<span class="hljs-keyword">var</span> Vue = <span class="hljs-built_in">require</span>(<span class="hljs-string">'vue'</span>);
<span class="hljs-keyword">var</span> electron = <span class="hljs-built_in">require</span>(<span class="hljs-string">'electron'</span>);
<span class="hljs-keyword">var</span> app = electron.app;  <span class="hljs-comment">// 控制应用生命周期的模块。</span>
<span class="hljs-keyword">var</span> BrowserWindow = electron.BrowserWindow;  <span class="hljs-comment">// 创建原生浏览器窗口的模块</span>

<span class="hljs-keyword">const</span> Menu = electron.Menu
<span class="hljs-comment">// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，</span>
<span class="hljs-comment">// window 会被自动地关闭</span>
<span class="hljs-keyword">var</span> mainWindow = <span class="hljs-literal">null</span>;

<span class="hljs-comment">// 当所有窗口被关闭了，退出。</span>
app.on(<span class="hljs-string">'window-all-closed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前</span>
  <span class="hljs-comment">// 应用会保持活动状态</span>
  <span class="hljs-keyword">if</span> (process.platform != <span class="hljs-string">'darwin'</span>) {
    app.quit();
  }
});
<span class="hljs-comment">// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候</span>
<span class="hljs-comment">// 这个方法就被调用</span>
app.on(<span class="hljs-string">'ready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
　<span class="hljs-comment">// 隐藏菜单栏</span>
  Menu.setApplicationMenu(<span class="hljs-literal">null</span>)
  <span class="hljs-comment">// 创建浏览器窗口。</span>
  mainWindow = <span class="hljs-keyword">new</span> BrowserWindow({<span class="hljs-attr">width</span>: <span class="hljs-number">800</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">600</span>});

  <span class="hljs-comment">// 加载应用的 index.html</span>
  mainWindow.loadURL(<span class="hljs-string">'file://'</span> + __dirname + <span class="hljs-string">'/index.html'</span>);

  <span class="hljs-comment">// 打开开发工具</span>
  mainWindow.openDevTools();

  <span class="hljs-comment">// 当 window 被关闭，这个事件会被发出</span>
  mainWindow.on(<span class="hljs-string">'closed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 取消引用 window 对象，如果你的应用支持多窗口的话，</span>
    <span class="hljs-comment">// 通常会把多个 window 对象存放在一个数组里面，</span>
    <span class="hljs-comment">// 但这次不是。</span>
    mainWindow = <span class="hljs-literal">null</span>;
  });
});

</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-comment">// 使用npm init 生成package.json</span>
{
  <span class="hljs-string">"name"</span>: <span class="hljs-string">"app"</span>,
  <span class="hljs-string">"version"</span>: <span class="hljs-string">"0.1.0"</span>,
  <span class="hljs-string">"main"</span>: <span class="hljs-string">"main.js"</span>
}
</div></code></pre>
<p>执行命令：</p>
<pre><code class="language-bash"><div>electron .
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-comment">// 渲染进程得到主进程</span>
<span class="hljs-keyword">const</span> BrowserWindow = <span class="hljs-built_in">require</span>(<span class="hljs-string">"electron"</span>).remote.BrowserWindow
<span class="hljs-comment">// 通过页面创建页面</span>
<span class="hljs-keyword">new</span> BrowserWindow({
    .....
}).loadURL(<span class="hljs-string">'file://'</span> + __dirname + <span class="hljs-string">'/second.html'</span>);

</div></code></pre>
<h2 id="打包成软件包">打包成软件包</h2>
<pre><code class="language-bash"><div>$ npm install electron-builder

$ npm install electron-package
<span class="hljs-comment"># 执行打包命令：</span>

$ electron-bulider
$ electron-packager . <span class="hljs-string">'HelloWorld'</span> --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
</div></code></pre>
<p>electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options></p>
<p>参数说明：
* location of project：项目所在路径
* name of project：打包的项目名字
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
* architecture：决定了使用 x86 还是 x64 还是两个架构都用
* electron version：electron 的版本
* optional options：可选选项</p>
<h1 id="混入mixins巧妙的使用会使程序变得简单">混入mixins（巧妙的使用会使程序变得简单）</h1>
<p>将定义的js属性，绑定到当前对象</p>
<h1 id="pm2nodejs进程管理工具不重要">pm2：nodejs进程管理工具(不重要)</h1>
<pre><code class="language-bash"><div>pm2 start &lt;js文件路径&gt;.js
pm2 start &lt;json描述文件路径&gt;.json
pm2 start &lt;python文件路径&gt;.py --interpreter python
pm2 start &lt;sh文件路径&gt;.sh --interpreter bash
pm2 start ./node_modules/&lt;某模块名称&gt;/&lt;模块主文件路径&gt;.js
pm2 start &lt;某种方式&gt; -- --param_name param_value
pm2 start npm -- start
pm2 start npm -- run &lt;scriptname&gt;
pm2 start yarn -- start
pm2 start yarn -- run &lt;scriptname&gt;
pm2 start &lt;某种方式&gt; --watch

<span class="hljs-comment"># 常用使用</span>
pm2 start npm -- run &lt;scriptname&gt;
<span class="hljs-comment"># 上述命令，就相当于 npm run &lt;scriptname&gt;，而我们平时启动node网站代码的时候，就是用这种方式启动的。对这个命令稍稍变形，就是pm2的start命令了。这个方法几乎是万能的。</span>
<span class="hljs-comment"># pm2 start npm -n 自定义进程名 -- run dev</span>
<span class="hljs-comment"># pm2 list</span>
<span class="hljs-comment"># pm2 delete 进程名</span>
</div></code></pre>
<h1 id="webpack">webpack</h1>
<p><img src="" alt="image-20210118090658920"></p>
<h2 id="自定义loader">自定义loader</h2>
<p>loader就是一种打包的方案。我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。</p>
<pre><code class="language-bash"><div>npm  init
</div></code></pre>
<pre><code class="language-bash"><div>npm install -D webpack
<span class="hljs-comment"># npm install -d 就是npm install --save-dev</span>
<span class="hljs-comment"># npm insatll -s 就是npm install --save</span>
</div></code></pre>
<p>创建编写文件： A.lee</p>
<p>创建loader</p>
<p>webpack.config.js配置loader</p>
<pre><code class="language-js"><div><span class="hljs-built_in">module</span>.exports = {
    <span class="hljs-attr">mode</span>:<span class="hljs-string">"development"</span>,<span class="hljs-comment">//webpack4 两个参数 development/production 不写默认production</span>
    entry:{
        <span class="hljs-attr">app</span>:<span class="hljs-string">"./app.js"</span><span class="hljs-comment">// 入口, 在该文件中引入A.lee即可</span>
    },
    <span class="hljs-attr">output</span>:{
        <span class="hljs-attr">filename</span>:<span class="hljs-string">"[name].bundle.js"</span><span class="hljs-comment">// 出口</span>
    },
    <span class="hljs-attr">module</span>:{
        <span class="hljs-attr">rules</span>:[
            {
                <span class="hljs-attr">test</span>:<span class="hljs-regexp">/\.lee$/</span>,
                <span class="hljs-attr">use</span>:{
                    <span class="hljs-attr">loader</span>:<span class="hljs-string">"./lee-loader"</span>,<span class="hljs-comment">//因为npm包没有我们的loader，所以要对应项目路径去引入</span>
                    options:{<span class="hljs-comment">//通常所传递的配置信息</span>
                        a:<span class="hljs-number">1</span>
                    }
                }
            }
        ]
    }
}
</div></code></pre>
<p>lee-loader:</p>
<pre><code class="language-js"><div><span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">"loader-utils"</span>);<span class="hljs-comment">//是我要那配置信息的依赖</span>
<span class="hljs-keyword">const</span> transform = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./libs/transform.js"</span>);<span class="hljs-comment">//自定义解析lee后缀文件的依赖</span>
<span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source</span>)</span>{<span class="hljs-comment">//参数是我们的需解析文件的内容</span>
    <span class="hljs-keyword">let</span> loaderOptions = loaderUtils.getOptions(<span class="hljs-keyword">this</span>) || {};<span class="hljs-comment">//拿到配置信息的方法</span>
        <span class="hljs-built_in">console</span>.log(loaderOptions)<span class="hljs-comment">//{a:1},即webpack.config.js对应loader，option配置信息</span>
    <span class="hljs-keyword">let</span> _res = transform(source);<span class="hljs-comment">//调用依赖包方法,解析代码为js字符串</span>
    <span class="hljs-keyword">return</span> _res;<span class="hljs-comment">//必须要有返回，返回解析号的字符串</span>
}
</div></code></pre>
<h1 id="vue下使用monaco-editor">vue下使用Monaco Editor</h1>
<pre><code class="language-bash"><div>npm install monaco-editor@0.21.2 --save
npm install monaco-editor-webpack-plugin --save //这个必须安装，不然起不来
</div></code></pre>
<pre><code class="language-js"><div><span class="hljs-comment">//webpack.base.conf.js</span>
<span class="hljs-keyword">const</span> MonacoWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'monaco-editor-webpack-plugin'</span>);
<span class="hljs-built_in">module</span>.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};
</div></code></pre>
<p>新建vue文件</p>
<pre><code class="language-html"><div><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-comment">&lt;!--宽高自行设定 --&gt;</span>
</div></code></pre>
<pre><code class="language-html"><div>import * as monaco from 'monaco-editor'
export default{
    data(){
        return {
            editor:null,//文本编辑器
        }
    },
    mounted(){
      this.initEditor();  
    },
    methods:{
        initEditor(){
            // 初始化编辑器，确保dom已经渲染
            this.editor = monaco.editor.create(document.getElementById('container'), {
                value：'',//编辑器初始显示文字
                language:'sql',//语言支持自行查阅demo
                automaticLayout: true,//自动布局
                theme:'vs-dark' //官方自带三种主题vs, hc-black, or vs-dark
            });
        },
        getValue(){
            this.editor.getValue(); //获取编辑器中的文本
        }
    }
}
</div></code></pre>
<p>查看支持的语言</p>
<pre><code class="language-js"><div><span class="hljs-built_in">console</span>.log(monaco.languages.getLanguages().map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">lang</span>) </span>{ <span class="hljs-keyword">return</span> lang.id; }));
</div></code></pre>

    </body>
    </html>